<template>
  <div class="eq_container eq_dashboard_container">
    <div class="app-container">
      <div class="top-block-frm" style="padding-bottom: 2px">
        <div class="tt">
          产品管理
        </div>
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="90px" size="mini">
          <!-- <div>
            <el-form-item label="状态" prop="status" label-width="54px">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择产品状态"
                clearable
              >
                <el-option
                  v-for="item in productStatusOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div> -->
        </el-form>
      </div>
      <div class="top-block-frm">
        <div class="ctrl-bar" style="justify-content: space-between; display: flex; font-size: 14px; align-items: center">
          <label>符合条件的 {{list.length}} 条记录</label>
          <div>
            <el-button type="primary" size="mini" icon="ti ti-table-plus" @click="toNew">
              新增产品
            </el-button>
          </div>

        </div>
        <el-table
            v-loading="loading"
            :data="list"
            border
            size="mini"
        >
          <el-table-column label="ID" align="left" prop="id" />
          <el-table-column label="产品名" align="left" prop="name"/>
          <el-table-column label="主标题" align="left" prop="title"/>
          <el-table-column label="副标题" align="left" prop="subtitle"/>
          <!-- <el-table-column label="描述url" align="left" prop="content_url"/> -->
          <el-table-column label="主图" align="left" min-width="200">
            <template slot-scope="scope">
              <div class="image-list">
                <img
                  v-for="(url, index) in parseImageList(scope.row.images)"
                  :key="index"
                  :src="url"
                  class="product-image"
                  @click="handlePreview(url)"
                />
              </div>
            </template>
          </el-table-column>
          <!-- ✅ 缩略图（单图） -->
          <el-table-column label="缩略图" align="left" width="120">
            <template slot-scope="scope">
              <img
                v-if="parseThumbnail(scope.row.thumbnail_image)"
               :src="parseThumbnail(scope.row.thumbnail_image)"
               class="thumbnail-image"
               @click="handlePreview(parseThumbnail(scope.row.thumbnail_image))"
              />
              <span v-else>—</span>
            </template>
          </el-table-column>
          <el-table-column label="最低价格" align="left" prop="lowest_price"/>
          <el-table-column label="货币" align="left" prop="currency"/>
          <el-table-column label="状态" align="left" prop="status">
            <template slot-scope="scope">
              <el-tag size="mini" :type="scope.row.status_cls">
                {{ scope.row.status_txt }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="left" prop="create_time" width="90"/>
          <el-table-column label="操作" width="150px" fixed="right" align="left">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="ti ti-edit"
                  @click="toEdit(scope.row)"
              >编辑详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
      <!-- 图片预览弹框 -->
      <el-dialog
        title="图片预览"
        :visible.sync="previewVisible"
        width="40%"
        :show-close="true"
        :close-on-click-modal="true"
      >
        <div style="text-align:center;">
          <img
            :src="previewImage"
            alt="预览图"
            style="max-width:100%; max-height:80vh; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.2);"
          />
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {
  getProductList,
} from '@/api/product'
import { parseImageList, parseThumbnail } from '@/utils/common'

export default {
  components: {
  },
  data() {
    return {
      loading: false,
      list:[],
      queryParams: {
        status: ''
      },
      previewVisible: false,
      previewImage: '',
      page: 1,
      page_size: 20,
      total:50,
      list:[
        {
          id:1,
          title:"标题哈哈哈",
          subtitle:"副标题",
          status:1
        }
      ],

      productStatusOption: this.hashmap.productStatusOption,
    }
  },
  created() {
    this.getProductList()
  },
  mounted() {
  },
  methods: {
    parseImageList,
    parseThumbnail,

    getProductList(){
      this.loading = true
      getProductList({
        'page':this.page,
        'page_size':this.page_size,
        'status':this.queryParams.status
      }).then((res)=>{
        if(res){
          this.total = res.data.total || 0
          this.list = res.data.list.map(item => ({
            ...item,
            status_txt: this.findJsonByKeyValue(this.productStatusOption, 'value', item.status).label || '',
            status_cls: this.findJsonByKeyValue(this.productStatusOption, 'value', item.status).typeClass || '',
          }))
        }
      }).finally(()=>{
        this.loading = false
      })
    },

    toNew() {
      this.$router.push({
        path: `/product/detail`
      })
    },
    toEdit(row) {
      this.$router.push({
        path: `/product/detail?id=${row.id}`
      })
    },

    handlePreview(url) {
      this.previewImage = url
      this.previewVisible = true
    },

    handleSizeChange(val) {
      this.page_size = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getProductList()
    },

   /** 搜索按钮操作 */
    handleQuery() {
      this.page = 1
      this.getProductList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryFormRef.resetFields() 
      this.handleQuery() 
    },

    goTab(path) {
      this.$router.push({
        path: path
      })
    },

    handleSaveSuccess() {
      this.dialogVisible = false
      this.getProductList()  
    },
    handleDeleteSuccess() {
      this.dialogVisible = false
      this.getProductList()  
   },
  }
}
</script>
<style src="@/styles/normalstyle.css"></style>
<style lang="scss" scoped>
</style>
